<template>
    <div class="app-container">
        <div class="customContainer ">
            <!-- 搜索头 -->
            <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
                <el-form-item>
                    <el-checkbox true-label="1" false-label="0" v-model="formInline.look_del" @change="lookDelChange" border>
                        查看已删门店
                </el-checkbox>
                </el-form-item>
                <el-form-item label="对比时间1">
                    <el-date-picker unlink-panels :editable="false" v-model="pickerDate1" type="daterange" align="right"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions1" style="width:230px"></el-date-picker>
                </el-form-item>
                <el-form-item label="对比时间2">
                    <el-date-picker unlink-panels :editable="false" v-model="pickerDate2" type="daterange" align="right"
                        range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"
                        :picker-options="pickerOptions2" style="width:230px"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-select filterable placeholder="选择门店" v-model="formInline.store_id">
                        <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <dj-button size="small" @search="searchClick" />
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" placement="bottom-end">
                        <div slot="content" style="line-height:20px;width:400px">
                            营业对比表数据取自除扫码支付、刷卡扣币、次季年卡外所有产生金额大于0的业务在PC端的营收记录，按照金额区间分别展示。
                            <br>笔数占比=该项笔数/合计笔数
                            <br>金额占比=该项金额/合计金额
                        </div>
                        <i class="el-icon-question"></i>
                    </el-tooltip>
                </el-form-item>
            </el-form>
            <!-- 表格 -->
            <el-table highlight-current-row show-summary :data="list" v-loading.body="listLoading" border
                :summary-method="getSummaries" size="small">
                <el-table-column align="center" prop="name" label="收入分类">
                </el-table-column>
                <el-table-column align="center" :label="time1">
                    <el-table-column align="center" prop="t1" label="笔数">
                        <template slot-scope="scope">
                            {{scope.$index==(list.length-1)?'-':scope.row.t1}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="t1_prop" label="笔数占比"
                        :render-header="(h,obj) => renderHeader(h,obj,'笔数占比=该日期该项笔数/该日期合计项笔数')"></el-table-column>
                    <el-table-column align="center" prop="m1" label="金额"></el-table-column>
                    <el-table-column align="center" prop="m1_prop" label="金额占比"
                        :render-header="(h,obj) => renderHeader(h,obj,'金额占比=该日期该项金额/该日期合计项金额')"></el-table-column>
                </el-table-column>
                <el-table-column align="center" :label="time2">
                    <el-table-column align="center" prop="t2" label="笔数">
                        <template slot-scope="scope">
                            {{scope.$index==(list.length-1)?'-':scope.row.t2}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="t2_prop" label="笔数占比"
                        :render-header="(h,obj) => renderHeader(h,obj,'笔数占比=该日期该项笔数/该日期合计项笔数')"></el-table-column>
                    <el-table-column align="center" prop="m2" label="金额"></el-table-column>
                    <el-table-column align="center" prop="m2_prop" label="金额占比"
                        :render-header="(h,obj) => renderHeader(h,obj,'金额占比=该日期该项金额/该日期合计项金额')"></el-table-column>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
    import {
        getList,
        getPage,
        getStoreList,
    } from "@/api/storage_control/business_compare_form"; 
    import { renderHeader } from '@/utils';
    export default {
        data() {
            return {
                renderHeader,
                list: [],
                total: null,
                listLoading: false,
                storeList: null,
                time1: '',
                time2: '',
                formInline: {
                    store_id: '',
                    begin_time1: '',
                    end_time1: '',
                    begin_time2: '',
                    end_time2: '',
                    look_del: '0'
                },
                pickerOptions1: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },
                },
                pickerDate1: [new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth() - 1, new Date().getDate())).toISOString().slice(0, 10).replace('-', '.').replace('-', '.'), new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())).toISOString().slice(0, 10).replace('-', '.').replace('-', '.')],
                pickerOptions2: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    },
                },
                pickerDate2: [new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth() - 1, new Date().getDate())).toISOString().slice(0, 10).replace('-', '.').replace('-', '.'), new Date(Date.UTC(new Date().getFullYear(), new Date().getMonth(), new Date().getDate())).toISOString().slice(0, 10).replace('-', '.').replace('-', '.')]
            }
        },
        beforeRouteEnter(to, from, next) {
            next((vm) => {
                if (!vm.storeList) {
                    vm.getStore();
                }
            })
        },
        methods: {
            lookDelChange() {
                this.getStore();
            },
            getStore() {
                getStoreList({ look_del: this.formInline.look_del, category_id: 289 }).then(response => {
                    this.storeList = response;
                  let data = response.filter(res => 
                        res.id == this.$store.getters.optionId
                    )
                    if(data.length>0){
                        this.formInline.store_id = data[0].id;
                    }
                });
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (index > 0) {
                        if (!values.every(value => isNaN(value))) {
                            sums[index] = values.reduce((prev, curr) => {
                                const value = Number(curr);
                                if (!isNaN(value)) {
                                    return prev + curr;
                                } else {
                                    return prev;
                                }
                            }, 0);
                            sums[index] += ''
                            sums[index] = (sums[index] * 1).toFixed(2) * 1;
                        } else {
                            sums[index] = '-';
                        }
                    }
                });
                return sums;
            },
            // 搜索
            searchClick() {
                if (this.pickerDate1 == null || this.pickerDate2 == null) {
                    this.$message({ type: 'error', message: '请先选择对比时间再进行查询' });
                    return;
                }
                if ((new Date(this.pickerDate1[1]).getTime() - new Date(this.pickerDate1[0]).getTime()) / 86400000 > 93 || (new Date(this.pickerDate2[1]).getTime() - new Date(this.pickerDate2[0]).getTime()) / 86400000 > 93) {
                    this.$message({ type: 'error', message: '所选时间区间最大为93天' });
                    return;
                }
                console.log(new Date(this.pickerDate1[0]).getFullYear() + '-' + (new Date(this.pickerDate1[0]).getMonth() + 1) + '-' + new Date(this.pickerDate1[0]).getDate())
                this.formInline.begin_time1 = new Date(this.pickerDate1[0]).getFullYear() + '-' + (new Date(this.pickerDate1[0]).getMonth() + 1) + '-' + new Date(this.pickerDate1[0]).getDate()
                this.formInline.end_time1 = new Date(this.pickerDate1[1]).getFullYear() + '-' + (new Date(this.pickerDate1[1]).getMonth() + 1) + '-' + new Date(this.pickerDate1[1]).getDate()
                this.formInline.begin_time2 = new Date(this.pickerDate2[0]).getFullYear() + '-' + (new Date(this.pickerDate2[0]).getMonth() + 1) + '-' + new Date(this.pickerDate2[0]).getDate()
                this.formInline.end_time2 = new Date(this.pickerDate2[1]).getFullYear() + '-' + (new Date(this.pickerDate2[1]).getMonth() + 1) + '-' + new Date(this.pickerDate2[1]).getDate()
                console.log(this.formInline)
                this.fetchData();
            },
            // 列表获取
            fetchData() {
                this.listLoading = true;
                let m1_total = 0;
                let m2_total = 0;
                let m3_total = 0;
                let t1_total = 0;
                let t2_total = 0;
                let t3_total = 0;
                let m1_prop = 0;
                let m2_prop = 0;
                let m3_prop = 0;
                let t1_prop = 0;
                let t2_prop = 0;
                let t3_prop = 0;
                getList(this.formInline).then(response => {
                    this.time1 = this.formInline.begin_time1 + ' 至 ' + this.formInline.end_time1
                    this.time2 = this.formInline.begin_time2 + ' 至 ' + this.formInline.end_time2
                    response.forEach(function (val, i) {
                        val.m1 = (val.m1 / 100).toFixed(2) * 1;
                        val.m2 = (val.m2 / 100).toFixed(2) * 1;
                        val.m3 = (val.m3 / 100).toFixed(2) * 1;
                        val.t1 *= 1;
                        val.t2 *= 1;
                        val.t3 *= 1;
                        // 总数
                        m1_total += val.m1;
                        m2_total += val.m2;
                        m3_total += val.m3;
                        t1_total += val.t1;
                        t2_total += val.t2;
                        t3_total += val.t3;
                    });
                    // 计算百分比
                    response.forEach(function (val, i) {
                        val.m1_prop = (val.m1 * 1 != 0) ? (val.m1 / m1_total * 100).toFixed(2) + '%' : '0%';
                        val.m2_prop = (val.m2 * 1 != 0) ? (val.m2 / m2_total * 100).toFixed(2) + '%' : '0%';
                        val.m3_prop = (val.m3 * 1 != 0) ? (val.m3 / m3_total * 100).toFixed(2) + '%' : '0%';
                        val.t1_prop = (val.t1 * 1 != 0) ? (val.t1 / t1_total * 100).toFixed(2) + '%' : '0%';
                        val.t2_prop = (val.t2 * 1 != 0) ? (val.t2 / t2_total * 100).toFixed(2) + '%' : '0%';
                        val.t3_prop = (val.t3 * 1 != 0) ? (val.t3 / t3_total * 100).toFixed(2) + '%' : '0%';
                    });
                    this.list = response;
                    this.listLoading = false;
                }).catch(res=>{
                    this.listLoading=false;
                })
            },
        }
    }
</script>